<template>
  <a-card :bodyStyle="{ padding: '0 24px' }" :bordered="false">
    <a-tabs v-model="actKey" @change="callback">
      <a-tab-pane key="1" :tab="$t('支付方式设置')">
        <div class="top-font">
          <span class="top-span">{{$t('说明：微信和支付宝相关的支付方式可根据实际情况设置所需要的收款渠道')}}</span>
        </div>
        <div style="margin-top: 10px">
          <a-button v-has="'BisPayTypeController:add'" type="primary" @click="handleAdd">{{$t('新增支付方式')}}</a-button>
          <a-button v-has="'BisPayTypeController:edit'" style="margin-left: 8px;" type="primary" @click="taxSet">{{$t('税收设置')}}</a-button>
        </div>
        <a-table
          :columns="columns2"
          :dataSource="dataSource"
          size="middle"
          bordered
          :pagination="false"
          style="margin-top: 20px; margin-bottom: 20px"
        >
          <template v-for="col in ['sort']" :slot="col" slot-scope="text, record">
            <div :key="col" style="display:flex;justify-content:center;">
              <div>
                <a-input
                  v-if="record.editable"
                  style="margin: -5px 0; padding: 0; width: 50px"
                  :value="text"
                  @change="(e) => handleChange(e.target.value, record.id, col)"
                  :maxLength="3"
                />
                <template v-else>{{ text }}</template>
              </div>
              <div class="editable-row-operations">
                <span v-if="record.editable">
                  <a @click="() => save(record.id)"><a-icon type="save" /></a>
                </span>
                <span v-else>
                  <a v-has="'BisPayTypeController:edit'" :disabled="editingKey !== ''" @click="() => edit(record.id)"><a-icon type="edit" /></a>
                </span>
              </div>
            </div>
          </template>

          <span slot="states" slot-scope="text, record">
            <a-switch v-enable-if="'BisPayTypeController:edit'"  v-model="record.states" @change="onChange(record)" ></a-switch>
          </span>
          <template slot="actions" slot-scope="text, record">
            <span v-if="taxSetting == 1">
              <a v-has="'BisPayTypeController:edit'" @click="handleEdit(record)">{{$t('修改')}}</a>
            </span>
            <span
              v-else-if="record.name == 2 || record.name == 3 || record.name == 4 || record.name == 8 || record.name == 9
              || record.name == 13 || record.name == 14 || record.name == 15|| record.name == 19 || record.name == 22 || record.name == 23
              || record.name == 24 || record.name == 25 || record.name == 26 || record.name == 27 || parseInt(record.name) > 900"
            >
              <a v-has="'BisPayTypeController:edit'" @click="handleEdit(record)">{{$t('修改')}}</a>
            </span>
            <span v-else>--</span>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" :tab="$t('收款渠道设置')">
        <a-table
          :columns="columns1"
          :dataSource="collectionList"
          size="middle"
          bordered
          :pagination="false"
          style="margin-bottom: 20px"
        >
          <span slot="action" slot-scope="text, record">
            <a v-has="'BisPayChannelIpayController:edit'" @click="handleEditParameter(record)">{{$t('设置参数')}}</a>
          </span>
        </a-table>
      </a-tab-pane>
    </a-tabs>
    <we-chat-modal ref="modalForm"></we-chat-modal>
    <ali-pay-modal ref="APmodalForm"></ali-pay-modal>
    <fuiou-modal ref="FmodalForm"></fuiou-modal>
    <shouqb-modal ref="SmodalForm"></shouqb-modal>
    <zhifusifang-modal ref="zfmodalForm"></zhifusifang-modal>
    <hit-modal ref="hitmodalForm"></hit-modal>
    <nets-modal ref="netsModalForm"></nets-modal>
    <ipay88-modal ref="ipay88ModalForm"></ipay88-modal>
    <ksher-modal ref="ksherModalForm"></ksher-modal>
    <bbpay-list ref="bbpayList"></bbpay-list>
    <cp-modal ref="cpModalForm"></cp-modal>
    <asia-modal ref="asiaModalForm"></asia-modal>
    <edit-modal ref="editForm" @ok="getList"></edit-modal>
    <tax-set-modal ref="taxForm" @ok="setTaxSuccess" />
    <pax-modal ref="paxModalForm"/>
  </a-card>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import WeChatModal from './modules/WeChatModal'
import AliPayModal from './modules/AliPayModal'
import FuiouModal from './modules/FuiouModal'
import ShouqbModal from './modules/ShouqbModal'
import ZhifusifangModal from './modules/ZhifusifangModal'
import HitModal from './modules/HitModal'
import NetsModal from './modules/NetsModal'
import Ipay88Modal from './modules/Ipay88Modal'
import KsherModal from './modules/KsherModal'
import BbpayList from './modules/BbpayList'
import CpModal from './modules/CpModal'
import AsiaModal from './modules/AsiaModal'
import EditModal from './modules/EditModal'
import TaxSetModal from './modules/TaxSetModal'
import PaxModal from './modules/PaxModal'

export default {
  name: 'PaySet',
  components: {
    WeChatModal,
    AliPayModal,
    FuiouModal,
    ShouqbModal,
    ZhifusifangModal,
    HitModal,
    NetsModal,
    Ipay88Modal,
    KsherModal,
    BbpayList,
    CpModal,
    AsiaModal,
    EditModal,
    TaxSetModal,
    PaxModal
  },
  data() {
    return {
      description: '支付设置管理页面',
      loading: false,
      actKey: '1',
      columns1: [
        {
          title: this.$t('收款渠道名称'),
          align: 'center',
          dataIndex: 'title',
        },
        {
          title: this.$t('操作'),
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      collectionList: [],
      columns2: [
        {
          title: this.$t('排序序号'),
          dataIndex: 'sort',
          align: 'center',
          scopedSlots: { customRender: 'sort' },
          customCell: () => {
            return {
              style: {
                width: '80px',
              },
            }
          }
        },
        {
          title: this.$t('支付方式'),
          align: 'center',
          dataIndex: 'nameText',
        },
        {
          title: this.$t('收款渠道名称'),
          align: 'center',
          dataIndex: 'payChannel_dictText',
          customRender: (text, record) => {
            if (!text) {
              return '--'
            } else {
              return text
            }
          },
        },
        {
          title: this.$t('管理状态'),
          align: 'center',
          dataIndex: 'states',
          scopedSlots: { customRender: 'states' },
        },
        {
          title: this.$t('操作'),
          align: 'center',
          dataIndex: 'actions',
          scopedSlots: { customRender: 'actions' },
        },
      ],
      paytypeList: [],
      dataSource: [],
      typeId: '',
      sortList: [],
      indexs: 0,
      typeList: [],
      stateList: [],
      editingKey: '',
      taxSetting: localStorage.getItem("taxSetting")
    }
  },
  created() {
    this.taxSetting = localStorage.getItem("taxSetting")
    if(this.taxSetting == '1'){
      this.columns2.splice(3,0,{
        title: this.$t('税率'),
        align: 'center',
        dataIndex: 'taxRate',
        customRender: (text, record) => {
          return text.toFixed(4)+'%'
        },
      })
    }
    this.getList()
    this.initDictConfig()
  },
  methods: {
    callback(e) {
      this.actKey = e
    },
    initDictConfig() {
      initDictOptions('bis_pay_channel.name').then((res) => {
        if (res.success) {
          this.collectionList = res.result
        }
      })
    },
    getList() {
      let param = {}
      param.pageNo = 1
      param.pageSize = 9999
      getAction('/pay/bisPayType/list', param).then((res) => {
        if (res.success) {
          res.result.records.forEach((col) => {
            if (col.state == 'Y') {
              col.states = true
            } else {
              col.states = false
            }
          })
          this.dataSource = res.result.records
        }
      })
    },
    edit(id) {
      let that = this
      const newData = [...that.dataSource]
      const target = newData.filter((item) => id === item.id)[0]
      this.editingKey = id
      if (target) {
        target.editable = true
        this.dataSource = newData
      }
    },
    save(id) {
      let that = this
      const newData = [...that.dataSource]
      const target = newData.filter((item) => id === item.id)[0]
      if (target) {
        delete target.editable
        postAction('/pay/bisPayType/edit', target)
          .then((res) => {
            if (res.success) {
              that.getList()
              that.$message.success(res.message)
            } else {
              that.$message.warning(res.message)
            }
          })
          .catch(() => {
            console.log('error')
          })
      }
      this.editingKey = ''
    },
    handleChange(value, id, column) {
      const newData = [...this.dataSource]
      const target = newData.filter((item) => id === item.id)[0]
      if (target) {
        target[column] = value
        this.dataSource = newData
      }
    },
    onChange(e) {
      e.state = e.states ? 'Y' : 'N'
      postAction('/pay/bisPayType/edit', { id: e.id, state: e.state }).then((res) => {
        if (res.success) {
          this.getList()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleEditParameter(record) {
      if (record.value == 1) {
        this.$refs.modalForm.edit()
        this.$refs.modalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 2) {
        this.$refs.APmodalForm.edit()
        this.$refs.APmodalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 3) {
        this.$refs.FmodalForm.edit()
        this.$refs.FmodalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 5) {
        this.$refs.SmodalForm.edit()
        this.$refs.SmodalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 6) {
        this.$refs.zfmodalForm.edit()
        this.$refs.zfmodalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 7) {
        this.$refs.hitmodalForm.edit()
        this.$refs.hitmodalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 8) {
        this.$refs.netsModalForm.edit()
        this.$refs.netsModalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 9) {
        this.$refs.ipay88ModalForm.edit()
        this.$refs.ipay88ModalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 10) {
        this.$refs.bbpayList.loadData(1)
        this.$refs.bbpayList.title = this.$t('设置支付参数')
        this.$refs.bbpayList.visible = true;
      }
      if (record.value == 11) {
        this.$refs.ksherModalForm.edit()
        this.$refs.ksherModalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 12) {
        this.$refs.cpModalForm.edit()
        this.$refs.cpModalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 13) {
        this.$refs.asiaModalForm.edit()
        this.$refs.asiaModalForm.title = this.$t('设置支付参数')
      }
      if (record.value == 15) {
        this.$refs.paxModalForm.edit()
        this.$refs.paxModalForm.title = this.$t('设置支付参数')
      }
    },
    handleEdit(record) {
      if (record.name == 2 || record.name == 3 || record.name == 4 || record.name == 14 || record.name == 15 || record.name == 19) {
        this.$refs.editForm.edit(record)
        this.$refs.editForm.title = this.$t('编辑')
      } else {
        this.$refs.editForm.edit(record)
        this.$refs.editForm.title = this.$t('编辑')
      }
    },
    handleAdd() {
      this.$refs.editForm.add()
      this.$refs.editForm.title = this.$t('新增支付方式')
    },
    taxSet(){
      this.$refs.taxForm.show()
    },
    setTaxSuccess(){
      this.columns2 = [
        {
          title: this.$t('排序序号'),
          dataIndex: 'sort',
          align: 'center',
          scopedSlots: { customRender: 'sort' },
          customCell: () => {
            return {
              style: {
                width: '80px',
              },
            }
          }
        },
        {
          title: this.$t('支付方式'),
          align: 'center',
          dataIndex: 'nameText',
        },
        {
          title: this.$t('收款渠道名称'),
          align: 'center',
          dataIndex: 'payChannel_dictText',
          customRender: (text, record) => {
            if (!text) {
              return '--'
            } else {
              return text
            }
          },
        },
        {
          title: this.$t('管理状态'),
          align: 'center',
          dataIndex: 'states',
          scopedSlots: { customRender: 'states' },
        },
        {
          title: this.$t('操作'),
          align: 'center',
          dataIndex: 'actions',
          scopedSlots: { customRender: 'actions' },
        },
      ]
      this.taxSetting = localStorage.getItem("taxSetting")
      if(this.taxSetting == '1'){
        this.columns2.splice(3,0,{
          title: this.$t('税率'),
          align: 'center',
          dataIndex: 'taxRate',
          customRender: (text, record) => {
            return text.toFixed(4)+'%'
          },
        })
      }
      this.getList()
    },
  },
}
</script>
<style scoped>
.top-font {
  font-size: 15px;
  font-weight: bold;
}
.top-span {
  color: #e38127;
  font-size: 14px;
}
</style>